<template>
	<view class="content">
		<view class="status-text">
			<text>任务状态： {{this.$dict.selectDictLabel('mes_order_status', this.form.status)}}</text>
		</view>
		<view>
			<u-form :border-bottom="false" :model="form" ref="uForm">
				<view class="form-content" style="margin-top: 3%;">
					<u-form-item :border-bottom="false" label-width="30%" label="工序:">
						<text class="form-text">{{form.processName}}</text>
					</u-form-item>
					<u-form-item :border-bottom="false" label-width="30%" label="客户订单:">
						<text class="form-text">{{form.clientOrderCode}}</text>
					</u-form-item>
					<u-form-item :border-bottom="false" label-width="30%" label="计划生产:">
						<text class="form-text">{{form.quantity + ' ' + $convertUnitmeasure(form.unitOfMeasure)}}</text>
					</u-form-item>
					<u-form-item :border-bottom="false" label-width="30%" label="已产合格品:">
						<text class="form-text">{{form.quantityQuanlify + ' ' + $convertUnitmeasure(form.unitOfMeasure)}}</text>
					</u-form-item>
					<u-form-item :border-bottom="false" label-width="30%" label="结束时间:">
						<text class="form-text">{{this.$dayjs(form.endTime).format('YYYY-MM-DD')}}</text>
					</u-form-item>
				</view>
				<u-divider v-if="this.type === 'modify'" style="margin-top: 2%;" bg-color="#f3f6f9" fontSize="40" color="#2a2b2d">待审核列表</u-divider>
				<u-divider v-else style="margin-top: 2%;" bg-color="#f3f6f9" fontSize="40" color="#2a2b2d">报工详细列表</u-divider>
				<view style="margin-top: 2%;">
					<uni-row>
						<uni-col :offset="15">
							<u-button v-if="this.type === 'modify'" shape="circle" size="mini" style="margin-left: 3px;"
								@click="selectAll()">全选</u-button>
							<u-button v-if="this.type === 'modify'" shape="circle" size="mini" style="margin-left: 3px;" @click="pass()">通过</u-button>
							<u-button v-if="this.type === 'modify'" shape="circle" size="mini" style="margin-left: 3px;"
								@click="refuse()">拒绝</u-button>
						</uni-col>
					</uni-row>
				</view>
				<view style="margin-top: 3%;">
					<text v-if="this.type === 'view'" style="font-size: 20px;margin-left: 3%; color:#7da6ec">共计报工次数:{{this.feedbackList.length}}次</text>
					<text v-else style="font-size: 20px;margin-left: 3%; color:#7da6ec">待审核数量:{{this.feedbackList.length}}次</text>
					<uni-list :border="false" v-for="item in feedbackList" :key="item.recordId">
						<uni-list-item style="background-color: #f3f6f9;" :title="convertFeedbackInfo(item)"
							:note="convertQuantity(item)" :rightText="convertStatus(item.status)">
							<template v-slot:footer>
								<text class="extra-text">{{convertStatus(item.status)}} </text>
								<u-checkbox v-if="type === 'modify'" v-model="item.checked"></u-checkbox>
							</template>
						</uni-list-item>
					</uni-list>
				</view>
			</u-form>
		</view>
		<view style="margin-top: 4%;">
			<u-row>
				<u-col>
					<u-button class="btn-gap" type="success" shape="circle" @click="back">返回任务列表</u-button>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	import {
		pass,
		refuse,
		getTaskAndAudit
	} from "@/api/work/audit/audit"

	import {
		getTaskAndFeedback
	} from "@/api/work/feedback/feedback"

	export default {
		data() {
			return {
				form: {
					taskId: null,
					taskCode: null,
					taskName: null,
					workorderId: null,
					workorderCode: null,
					workorderName: null,
					workstationId: null,
					workstationCode: null,
					workstationName: null,
					routeId: null,
					processId: null,
					processCode: null,
					processName: null,
					itemId: null,
					itemCode: null,
					itemName: null,
					specification: null,
					unitOfMeasure: null,
					quantity: null,
					quantityProduced: null,
					quantityChanged: null,
					clientId: null,
					clientCode: null,
					clientName: null,
					clientNick: null,
					startTime: null,
					duration: null,
					endTime: null,
					requestDate: null,
					remark: null,
					attr1: null,
					attr2: null,
					attr3: null,
					attr4: null,
					createBy: null,
					createTime: null,
					updateBy: null,
					updateTime: null,
					quantityUnquanlified: null,
					quantityQualified: null
				},
				taskId: undefined,
				btnDisable: false,
				feedbackList: [],
				scrollTop: 0,
				type: 'view'
			}
		},
		onLoad(options) {
			this.taskId = options.taskId;
			this.type = options.type;
			this.getTaskAndFeedback(this.taskId);
		},
		methods: {
			pass() {
				let ids = this.getCheckedIds();
				pass(ids).then(res => {
						uni.showToast({
							title: '审批成功',
							icon: 'none',
							duration: 2000
						});
						this.getTaskAndFeedback(this.taskId);
					}

				)
			},
			refuse() {
				let ids = this.getCheckedIds();
				refuse(ids).then(res => {
					uni.showToast({
						title: '审批成功',
						icon: 'none',
						duration: 2000
					});
					this.getTaskAndFeedback(this.taskId);
				})
			},
			selectAll() {
				this.feedbackList.forEach(f => f.checked = true)
			},
			getTaskAndFeedback(taskId) {
				if (this.$isEmpty(taskId)) {
					uni.showToast({
						title: '无法获取数据，请稍候再试',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (this.type === 'view') {
					getTaskAndFeedback(taskId).then(res => {
						this.form = res.data.task
						this.feedbackList = res.data.feedbackList
					})
				} else {
					getTaskAndAudit(taskId).then(res => {
						this.form = res.data.task
						this.feedbackList = res.data.feedbackList
					})
				}

			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			convertQuantity(item) {
				return `报工数量共计: ${item.quantityFeedback} ${this.$convertUnitmeasure(item.unitOfMeasure)},
				其中合格产品数量: ${item.quantityQualified} ${this.$convertUnitmeasure(item.unitOfMeasure)} ,
				不合格产品数量: ${item.quantityUnquanlified == null ? 0 : item.quantityUnquanlified} ${this.$convertUnitmeasure(item.unitOfMeasure)}`
			},
			convertFeedbackInfo(item) {
				return `上报人:${item.userName},报工时间: ${item.feedbackTime}`
			},
			convertStatus(status) {
				return this.$dict.selectDictLabel('mes_order_status', status)
			},
			getCheckedIds() {
				return this.feedbackList.filter(f => f.checked === true).map(m => m.recordId);
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .uni-list-item__content-title {
		font-size: 18px;
	}

	/deep/ .uni-list-item__content-note {
		font-size: 14px;
	}

	/deep/ .uni-list-item__extra-text {
		font-size: 16px;
		color: #7da6ec;
	}

	.extra-text {
		font-size: 14px;
		color: #7da6ec;
	}

	.title-text {
		height: 8%;
		display: flex;
		align-items: center;
		margin-left: 2%;
		font-size: 18px;
		font-weight: bold;

	}

	.status-text {
		margin-left: 3%;
		border-radius: 15px;
		height: 8%;
		display: flex;
		align-items: center;
		font-size: 20px;
		color: #7da6ec;
		font-weight: bold;
	}

	.content {
		background-color: #f3f6f9;
		height: 100%;
	}

	.form-content {
		border-radius: 15px;
		background-color: white;

		.u-form-item {
			margin-left: 3%;
			font-size: 18px;
		}

		.form-text {
			color: #999999;
			text-align: right;
			margin-left: 20%;
		}
	}
</style>